<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:composite="http://java.sun.com/jsf/composite">

<!-- INTERFACE -->
<composite:interface>
	<composite:attribute name="valor" required="true" />
</composite:interface>

<!-- IMPLEMENTATION -->
<composite:implementation>
	<h:outputStylesheet library="css" name="components.css" target="head" />

		<c:if test="#{cc.attrs.valor gt 100 and cc.attrs.valor lt 199}">
			<div 
				class="ui-progressbar ui-corner-all ui-progressbar-value ui-widget-header"
				role="progressbar" aria-valuemin="0"
				aria-valuenow="#{cc.attrs.valor}" aria-valuemax="100">
				<div class="ui-progressbar-value ui-widget-header ui-corner-all"
					style="background-color: red !important; display: block; width: #{cc.attrs.valor -  100}%"></div>
			</div>
		</c:if>
		
		<c:if test="#{cc.attrs.valor gt 200}">
			<div 
				class="ui-progressbar ui-corner-all ui-progressbar-value ui-widget-header"
				role="progressbar" aria-valuemin="0"
				aria-valuenow="#{cc.attrs.valor}" aria-valuemax="100">
				<div class="ui-progressbar-value ui-widget-header ui-corner-all"
					style="background-color: red !important; display: block; width: 100%"></div>
			</div>
		</c:if>

		<c:if test="#{cc.attrs.valor le 100}">
		<div 
			class="ui-progressbar ui-widget ui-widget-content ui-corner-all"
			role="progressbar" aria-valuemin="0"
			aria-valuenow="#{cc.attrs.valor}" aria-valuemax="100">
			<div class="ui-progressbar-value ui-widget-header ui-corner-all"
				style="display: block; width: #{cc.attrs.valor}%"></div>
		</div>

	</c:if>


</composite:implementation>
</html>